<template>
  <div class="collect-root">
    <div class="sensor-card">
      <div class="header-section">
        <h2>推料气缸</h2>
        <img src="/src/assets/sensor.png" alt="Sensor" class="device-image" />
      </div>
      <div class="input-section">
        <div class="input-item-no-input">
          <span class="red-diamond">◆</span>
          <h4>气缸动作力度</h4>
          <span class="red-diamond">◆</span>
          <h4>气缸动作速度</h4>
          <span class="red-diamond">◆</span>
          <h4>磁性开关位置</h4>
        </div>
        <div class="input-group">
          <div class="group-title">调试方法:</div>
          <el-input
            v-model="question_qgld_1"
            type="textarea"
            :rows="1"
            placeholder="请输入调试方法..."
            @input="onInput_qgld('question', $event)"
            class="group-input"
          />

          <el-input
            v-model="question_qgsd_2"
            type="textarea"
            :rows="1"
            placeholder="请输入调试方法..."
            @input="onInput_qgsd('question', $event)"
            class="group-input"
          />

          <el-input
            v-model="question_cxkg_3"
            type="textarea"
            :rows="1"
            placeholder="请输入调试方法..."
            @input="onInput_cxkg('question', $event)"
            class="group-input"
          />
        </div>

        <div class="input-group">
          <div class="group-title">注意事项:</div>
          <el-input
            v-model="answer_qgld_1"
            type="textarea"
            :rows="1"
            placeholder="请输入注意事项..."
            @input="onInput_qgld('answer', $event)"
            class="group-input"
          />
          <el-input
            v-model="answer_qgsd_2"
            type="textarea"
            :rows="1"
            placeholder="请输入注意事项..."
            @input="onInput_qgsd('answer', $event)"
            class="group-input"
          />
          <el-input
            v-model="answer_cxkg_3"
            type="textarea"
            :rows="1"
            placeholder="请输入注意事项..."
            @input="onInput_cxkg('answer', $event)"
            class="group-input"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { updateQuestion as apiUpdateQuestion, updateTeachingAnswer as apiUpdateAnswer } from '../api'

const route = useRoute()
const userId = computed(() => Number(route.query.user_id) || 0)

const question_qgld_1 = ref('')
const question_qgsd_2 = ref('')
const question_cxkg_3 = ref('')

const answer_qgld_1 = ref('')
const answer_qgsd_2 = ref('')
const answer_cxkg_3 = ref('')


let timers = {}

function onInput_qgld(type, event) {
  if (timers[type]) clearTimeout(timers[type])
  const value = event && event.target ? event.target.value : ''
  timers[type] = setTimeout(() => {
    if (type === 'question') {
      apiUpdateQuestion(userId.value, 4, 7, question_qgld_1.value)
        .catch(error => console.error('Error updating question:', error))
    } else if (type === 'answer') {
      apiUpdateAnswer(userId.value, 4, 7, answer_qgld_1.value)
        .catch(error => console.error('Error updating answer:', error))
    }
  }, 500)
}

function onInput_qgsd(type, event) {
  if (timers[type]) clearTimeout(timers[type])
  const value = event && event.target ? event.target.value : ''
  timers[type] = setTimeout(() => {
    if (type === 'question') {    
      apiUpdateQuestion(userId.value, 4, 8, question_qgsd_2.value)
        .catch(error => console.error('Error updating question:', error))
    } else if (type === 'answer') {
      apiUpdateAnswer(userId.value, 4, 8, answer_qgsd_2.value)
        .catch(error => console.error('Error updating answer:', error))
    }
  }, 500)
} 

function onInput_cxkg(type, event) {
  if (timers[type]) clearTimeout(timers[type])
  const value = event && event.target ? event.target.value : ''
  timers[type] = setTimeout(() => {
    if (type === 'question') {
      apiUpdateQuestion(userId.value, 4, 9, question_cxkg_3.value)
        .catch(error => console.error('Error updating question:', error))
    } else if (type === 'answer') {
      apiUpdateAnswer(userId.value, 4, 9, answer_cxkg_3.value)
        .catch(error => console.error('Error updating answer:', error))
    }
  }, 500)       
}
                       

</script>

<style scoped>
.collect-root {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #f5f7fa);
  padding: 20px;
}
.sensor-card {
  background-color: #e6ffe6;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-width: 400px;
}
.header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.header-section h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #409eff;
  margin: 0;
}
.device-image {
  width: 120px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.input-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.input-item-no-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.input-item-no-input h3 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  margin: 0;
}
.red-diamond {
  color: #f56c6c;
  font-size: 1.2rem;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.group-title {
  font-size: 1.05rem;
  color: #409eff;
  font-weight: 500;
}
.group-input {
  width: 100%;
}
</style>